<template>
    <div class="project-statistics">
        <wrapper-content pageTitle="">
            <div class="data-content">
                <Row class="statistics-top">
                    <i-col class="top-item" span="6">
                        <Card class="text-default-second">
                            <span slot="extra">
                                <Tooltip content="指标说明">
                                    <Icon size="16" type="ios-information-outline"></Icon>
                                </Tooltip>
                            </span>
                            <div class="item-top muted-dark">
                                <span>项目总量</span>
                                <h1 class="text-default">{{ project_total }}</h1>
                            </div>
                            <div class="item-content">
                                <div class="chart-content">
                                    <chart :options="chart_data_project" ref="chart_data" auto-resize></chart>
                                </div>
                            </div>
                            <div class="item-footer">
                                <div class="trend-item">
                                    <span>月项目数 <span class="trend-text">{{ project_month_total }}</span></span>
                                </div>
                            </div>
                        </Card>
                    </i-col>
                    <i-col class="top-item" span="6">
                        <Card class="text-default-second">
                            <span slot="extra">
                                <Tooltip content="指标说明">
                                    <Icon size="16" type="ios-information-outline"></Icon>
                                </Tooltip>
                            </span>
                            <div class="item-top muted-dark">
                                <span>总任务数</span>
                                <h1 class="text-default">{{ task_total }}</h1>
                            </div>
                            <div class="item-content">
                                <div class="chart-content">
                                    <chart :options="chart_data" ref="chart_data" auto-resize></chart>
                                </div>
                            </div>
                            <div class="item-footer">
                                <div class="trend-item">
                                    <span>今日任务 <span class="trend-text">{{ task_today_total }}</span></span>
                                </div>
                            </div>
                        </Card>
                    </i-col>
                    <i-col class="top-item" span="6">
                        <Card class="text-default-second">
                            <span slot="extra">
                                <Tooltip content="指标说明">
                                    <Icon size="16" type="ios-information-outline"></Icon>
                                </Tooltip>
                            </span>
                            <div class="item-top muted-dark">
                                <span>逾期任务</span>
                                <h1 class="text-default">49</h1>
                            </div>
                            <div class="item-content">
                                <div class="content-fixed">
                                    <div class="trend-item">
                                        <span>周同比 <span class="trend-text">12%</span></span>
                                        <span class="text-danger"><Icon type="arrow-up-b"></Icon></span>
                                    </div>
                                    <div class="trend-item">
                                        <span>日环比 <span class="trend-text">8%</span></span>
                                        <span class="text-success"><Icon type="arrow-down-b"></Icon></span>
                                    </div>
                                </div>
                            </div>
                            <div class="item-footer">
                                <div class="trend-item">
                                    <span>逾期率 <span class="trend-text">7%</span></span>
                                </div>
                            </div>
                        </Card>
                    </i-col>
                    <i-col class="top-item" span="6">
                        <Card class="text-default-second">
                            <span slot="extra">
                                <Tooltip content="指标说明">
                                    <Icon size="16" type="ios-information-outline"></Icon>
                                </Tooltip>
                            </span>
                            <div class="item-top muted-dark">
                                <span>整体进度</span>
                                <h1 class="text-default">76%</h1>
                            </div>
                            <div class="item-content">
                                <div class="content-fixed">
                                    <Progress :percent="76" status="active" hide-info></Progress>
                                </div>
                            </div>
                            <div class="item-footer">
                                <div class="trend-item">
                                    <span>周同比 <span class="trend-text">27%</span></span>
                                    <span class="text-danger"><Icon type="arrow-up-b"></Icon></span>
                                </div>
                                <div class="trend-item">
                                    <span>日环比 <span class="trend-text">68%</span></span>
                                    <span class="text-success"><Icon type="arrow-down-b"></Icon></span>
                                </div>
                            </div>
                        </Card>
                    </i-col>
                </Row>
                <Row class="statistics-content">
                    <i-col class="content-item" span="24">
                        <Card class="text-default-second" dis-hover>
                            <Tabs>
                                <TabPane label="项目数" name="project">
                                    <Row>
                                        <i-col span="18">
                                            <chart :options="chart_data_project_num" ref="chart_data_project_num" auto-resize></chart>
                                        </i-col>
                                        <i-col span="6">
                                            <div class="item-right">
                                                <div class="item-right-title">
                                                    <span class="trend-text">项目数量排名</span>
                                                </div>
                                                <div class="item-right-content text-default-second m-t">
                                                    <ul>
                                                        <li v-for="(user,index) in project_total_user.list" :key="index">
                                                            <span>
                                                                <Badge class-name="sort-badge" :count="index + 1" v-if="index <= 2"></Badge>
                                                                <Badge class-name="sort-badge-second" :count="index + 1" v-else></Badge>
                                                            </span>
                                                            <span>{{ user.realname }}</span>
                                                            <span class="pull-right">{{ user.last }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </i-col>
                                    </Row>
                                </TabPane>
                                <TabPane label="绩效值" name="task">
                                    <Row>
                                        <i-col span="18">
                                            <chart :options="chart_data_project_jixiao" ref="chart_data_project_jixiao" auto-resize></chart>
                                        </i-col>
                                        <i-col span="6">
                                            <div class="item-right">
                                                <div class="item-right-title">
                                                    <span class="trend-text">项目绩效排名</span>
                                                </div>
                                                <div class="item-right-content text-default-second m-t">
                                                    <ul>
                                                        <li v-for="(user,index) in project_total_user.list" :key="index">
                                                            <span>
                                                                <Badge class-name="sort-badge" :count="index + 1" v-if="index <= 2"></Badge>
                                                                <Badge class-name="sort-badge-second" :count="index + 1" v-else></Badge>
                                                            </span>
                                                            <span>{{ user.realname }}</span>
                                                            <span class="pull-right">{{ user.last }}</span>
                                                        </li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </i-col>
                                    </Row>
                                </TabPane>
                            </Tabs>
                        </Card>
                    </i-col>
                    <i-col class="content-item" span="12">
                        <Card class="text-default-second" dis-hover>
                            <div class="card-head">
                                <span class="card-head-title">最近项目</span>
                            </div>
                            <div class="card-body">
                                <Table border size="small" :columns="columns"
                                       :data="project_list.list" class="no-border-table"></Table>
                                <Page v-if="project_list_total > 0" :total="project_list_total" :current="page_num" @on-change="changeProjectListPage" size="small" class="table-page"></Page>
                            </div>
                        </Card>
                    </i-col>
                    <i-col class="content-item" span="12">
                        <Card class="text-default-second" style="height: 570px;" dis-hover>
                            <div class="card-head">
                                <span class="card-head-title">项目类型占比</span>
                            </div>
                            <div class="card-body project-type">
                                <chart :options="chart_data_project_type" ref="chart_data_project_type" auto-resize></chart>
                            </div>
                        </Card>
                    </i-col>
                </Row>
            </div>
        </wrapper-content>
        <task-detail :showModal="show_task_detail" :task_id="task_id" @on-modal-change="modalChange">
        </task-detail>
        <transition name="router-slid">
            <router-view></router-view>

        </transition>

    </div>
</template>
<style>
    .project-statistics .system-notice {
        padding-right: 20px;
        padding-bottom: 10px;
    }

    .project-statistics .layout-content {
        background: #f1f1f1;
        box-shadow: none;
        padding: 0;
    }

    .project-statistics .wrapper-content .data-content {
        margin-top: 0;
    }

    .project-statistics .ivu-card-body {
        padding-bottom: 10px;
    }

    .project-statistics .top-item {
        padding: 0 10px;
    }

    .project-statistics .top-item .item-top h1 {
        font-weight: 400;
        font-size: 30px;
    }

    .project-statistics .trend-item {
        display: inline-block;
        padding-right: 10px;
    }

    .project-statistics .trend-text {
        padding-left: 5px;
        color: #383838;
    }

    .project-statistics .item-content {
        position: relative;
        width: 100%;
        height: 45px;
    }

    .project-statistics .content-fixed {
        position: absolute;
        width: 100%;
        bottom: 0;
    }

    .project-statistics .content-item {
        padding: 20px 10px 0 10px;
    }

    .project-statistics .item-footer {
        border-top: 1px solid #e8e8e8;
        padding-top: 8px;
        margin-top: 10px;
    }

    .chart-content {
        position: absolute;
        bottom: -15px;
        width: 100%;
    }

    .project-statistics .statistics-top .echarts {
        width: 100% !important;
        height: 100px !important;
    }

    .project-statistics .statistics-content .echarts {
        width: 100% !important;
        height: 250px !important;
    }
    .project-statistics .statistics-content .content-item .ivu-card {
        padding-bottom: 20px;
    }
    .project-statistics .sort-badge{
        font-weight: 500;
        background-color: #314659;
    }
    .project-statistics .sort-badge-second{
        font-weight: 500;
        background-color: #f5f5f5;
        color: rgba(0,0,0,.65);
    }
    .project-statistics .item-right-content ul > li{
        padding: 5px 0;
    }
    .project-statistics .item-right-content ul > li span{
        padding-right: 10px;
    }
    .project-statistics .card-head{
        border-bottom: 1px solid #e8e8e8;
        padding-bottom: 15px;
    }
    .project-statistics .card-head .card-head-title{
        font-size: 14px;
    }
    .project-statistics .card-body{
        padding-top: 15px;
    }
    .project-statistics .card-body.project-type .echarts{
        height: 350px !important;
        margin-top: 40px;
    }
</style>
<script type="es6">
  import ECharts from 'vue-echarts/components/ECharts'
  import 'echarts/lib/chart/line'
  import 'echarts/lib/chart/bar'
  import 'echarts/lib/chart/pie'
  import 'echarts/lib/component/legend'
  import 'echarts/lib/component/tooltip'
  import 'echarts/lib/component/title'
  import WrapperContent from '../../../components/wrapper-content.vue'
  import TaskDetail from '../../../components/task-detail.vue'
  import {mapGetters} from 'vuex'
  import axios from 'axios'
  import * as utils from '../../../assets/js/utils'
  import $ from 'jquery'
  import _ from 'lodash'
  import {sendAjax} from "../../../assets/js/utils";
  import {setStore} from "../../../assets/js/utils";

  export default {
    components: {
      WrapperContent,
      TaskDetail,
      chart: ECharts
    },
    data() {
      return {
        data_loading: false,
        send_loading: false,
        page_size: 10,
        page_num: 1,
        task_total: 0,
        task_today_total: 0,
        project_total: 0,
        project_month_total: 0,
        project_total_user: [],
        keyword: '',
        current_user: {},
        show_task_detail: false,
        task_id: 0,
        task_index: 0,
        chart_data: {
          title: {
            show: false,
            text: '团队任务统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['待办', '需求', '新增', 'BUG', '其他']
          },
          grid: {
            left: '-5%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            show: false,
            type: 'category',
            boundaryGap: false,
            data: []
          },
          yAxis: {
            show: false,
            type: 'value',
            minInterval: 1
          },
          series: []
        },
        chart_data_project: {
          title: {
            show: false,
            text: '团队任务统计'
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['待办', '需求', '新增', 'BUG', '其他']
          },
          grid: {
            left: '-5%',
            right: '0%',
            bottom: '0%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            show: false,
            type: 'category',
            // boundaryGap: false,
          },
          yAxis: {
            show: false,
            type: 'value',
            minInterval: 1
          },
          series: []
        },
        chart_data_project_num: {
          title: {
            text: '项目数趋势',
            textStyle: {
              color: 'rgba(0,0,0,.85)',
              fontWeight: 'normal',
              fontSize: '14'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['待办', '需求', '新增', 'BUG', '其他']
          },
          grid: {
            left: '0%',
            right: '6%',
            bottom: '0%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            axisTick : {show: false},
            axisLine: {
              lineStyle: {
                color: '#A6A6A6'
              }
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            axisTick : {show: false},
            axisLine: {
              lineStyle: {
                color: '#A6A6A6'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
          },
          series: []
        },
        chart_data_project_jixiao: {
          title: {
            text: '绩效值趋势',
            textStyle: {
              color: 'rgba(0,0,0,.85)',
              fontWeight: 'normal',
              fontSize: '14'
            }
          },
          tooltip: {
            trigger: 'axis'
          },
          legend: {
            show: false,
            data: ['待办', '需求', '新增', 'BUG', '其他']
          },
          grid: {
            left: '0%',
            right: '6%',
            bottom: '0%',
            containLabel: true
          },
          toolbox: {
            feature: {
              saveAsImage: {}
            }
          },
          xAxis: {
            type: 'category',
            axisTick : {show: false},
            axisLine: {
              lineStyle: {
                color: '#A6A6A6'
              }
            }
          },
          yAxis: {
            type: 'value',
            minInterval: 1,
            axisTick : {show: false},
            axisLine: {
              lineStyle: {
                color: '#A6A6A6'
              }
            },
            splitLine: {
              lineStyle: {
                type: 'dashed'
              }
            },
          },
          series: []
        },
        chart_data_project_type: {
          title: [{
            text: '项目类型',
            left: '49%',
            top: '46%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: '#A6A6A6',
              fontWeight: 'normal',
              fontSize: 14
            }
          }, {
            text: 3334,
            left: '49%',
            top: '55%',
            textAlign: 'center',
            textBaseline: 'middle',
            textStyle: {
              color: 'rgba(0, 0, 0, 0.65)',
              fontWeight: 'normal',
              fontSize: 25
            }
          }],
          grid: {
            left: 25
          },
          tooltip: {
            trigger: 'item',
            formatter: "{b}: {d}%"
          },
          legend: {
            orient: 'vertical',
            top: 'center',
            align: 'left',
            icon: 'circle',
            formatter:function(name){
              for(var i = 0; i < 3; i++){
                  return name  + '   |  ' + ((Math.random()*100+1)).toFixed(2) + '%'+ '    ' + parseInt(Math.random()*1000+1);
              }
            },
            x: 'right',
            borderRadius: 25,
            data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
          },
          series: [
            {
              name:'访问来源',
              type:'pie',
              hoverAnimation: false,
              radius: ['55%', '70%'],
              selectedMode: 'single',
              selectedOffset: 16, //选中是扇区偏移量
              clockwise: true,
              startAngle: 90,
              label: {
                normal: {
                  show: false
                }
              },
              labelLine: {
                normal: {
                  show: false
                }
              },
              itemStyle: {
                normal: {
                  borderWidth: 3,
                  borderColor: '#ffffff',
                },
                emphasis: {
                  borderWidth: 0,
                  shadowBlur: 5,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.2)'
                }
              },
              data:[
                {value:335, name:'直接访问'},
                {value:310, name:'邮件营销'},
                {value:234, name:'联盟广告'},
                {value:135, name:'视频广告'},
                {value:1548, name:'搜索引擎'}
              ]
            }
          ]
        },
        loading_project: true,
        project_list: [],
        project_list_total: 0,
        columns: [
          {
            title: '名称',
            key: 'name',
            render: (h, params) => {
              return h('router-link', {
                attrs: {
                  title: params.row.name,
                  class: 'table-row-title',
                  to: '/project/task/' + params.row.project_id
                }
              }, params.row.name);
            }
          },
          // {
          //   title: '评级',
          //   key: 'level_name',
          //   width: 60,
          // },
          {
            title: '截止',
            key: 'end',
            width: 120,
          },
          {
            title: '进度',
            key: 'schedule',
            width: 100,
            render: (h, params) => {
              return h('span', {
                style: {
                  color: '#19be6b'
                }
              }, params.row.schedule + '%')
            }
          },
          {
            title: '业务',
            key: 'business_info',
            width: 160,
            render: (h, params) => {
              return h('span', {
                style: {
                  color: '#ff9900'
                }
              }, params.row.business_info.realname)
            }
          },
        ],
      }
    },
    watch: {
      '$route'(to, from) { // 路由监听，重新获取数据
        if (this.$store.state.list_reload) {

        }
      }
    },
    computed: {
      ...
        mapGetters([
          'user_info',
          'notify_no_read_list',
        ]),
    },
    created: function () {
      let app = this
      // app.$store.state.page_loading = true
      app.current_user = app.user_info
      app.getTaskStatisticsByAll()
      app.getProjectStatisticsByAll()
      app.getProjectStatisticsJixiaoByAll()
      app.getTeamUserList()
      app.getProjectList()
      this.$options.sockets.action_synchronize = (data) => {
        const push_data = utils.getPushData(data)

        console.log('overview_action_synchronize')
      }
    },
    methods: {
      getUserInfo() {
        let app = this
        sendAjax({
          url: 'User_User.getInfoByToken',
          success: function (res) {
            app.current_user = res.data.user_info
            app.$store.state.user_info = res.data.user_info
            setStore('user_info', res.data.user_info)
          }
        })
      },
      getProjectList() {
        let app = this
        app.loading_project = true
        utils.sendAjax({
          url: 'Project_Project.getList',
          data: {
            page_size: this.page_size,
            page_num: this.page_num,
          },
          success: function (res) {
            app.loading_project = false
            app.project_list_total = res.data.count
            app.project_list = res.data
          }
        });
      },
      changeProjectListPage(page) {
        this.page_num = page
        this.getProjectList()
      },
      getTaskStatisticsByAll() {
        let app = this
        sendAjax({
          url: 'Project_Task.getTaskStatisticsByAll',
          data: {
            type: 'month'
          },
          success: function (res) {
            app.$store.state.page_loading = false
            app.task_total = res.data.total
            app.task_today_total = res.data.today_total
            app.chart_data.series = res.data.data
            app.chart_data.xAxis.data = res.data.field
            app.chart_data.legend.data = res.data.task_type_list
          }
        });
      },
      getProjectStatisticsByAll() {
        let app = this
        sendAjax({
          url: 'Project_Project.getProjectStatisticsByAll',
          data: {
            type: 'current_month'
          },
          success: function (res) {
            app.$store.state.page_loading = false
            app.project_total = res.data.total
            app.project_month_total = res.data.month_total
            app.chart_data_project.series = res.data.data
            app.chart_data_project.xAxis.data = res.data.field
            app.chart_data_project.legend.data = res.data.task_type_list

            app.chart_data_project_num.series = res.data.data
            app.chart_data_project_num.xAxis.data = res.data.field
            app.chart_data_project_num.legend.data = res.data.task_type_list
          }
        });
      },
      getProjectStatisticsJixiaoByAll() {
        let app = this
        sendAjax({
          url: 'Project_Project.getProjectStatisticsByAll',
          data: {
            type: 'current_month',
            jixiao: true,
          },
          success: function (res) {
            app.chart_data_project_jixiao.series = res.data.data
            app.chart_data_project_jixiao.xAxis.data = res.data.field
            app.chart_data_project_jixiao.legend.data = res.data.task_type_list
          }
        });
      },
      getTeamUserList() {
        let app = this
        utils.sendAjax({
          url: 'Team_Team.getTeamUser',
          data: {
            page_size: 50,
            team_id: 0
          },
          success: function (res) {
            app.project_total_user = res.data
          }
        });
      },
      showTaskDetail(task_id, task_index) {
        this.show_task_detail = true
        this.task_id = task_id
        this.task_index = task_index
      },
      modalChange(value) {
        this.show_task_detail = value
      },
      reloadList() {
        this.getList(1, this.page_size)
      },
      rowClassName(row, index) {
        return 'rowClassName';
      },
      goPage(url) {
        this.$router.push(url)
      },

    },

  };
</script>
